<extend name="Common:base" />
<block name="head">
  <style>
	.el-card__header {
	    padding: 15px 20px;
	    border-bottom: 1px solid #D3DCE6;
	    box-sizing: border-box;
	    background: #3fc3e2;
	    color: #ffffff;
	}
  </style>
</block>
<block name="body">

<div id="app" class="container">
<div class="wrapp" v-show="show" style="display: none;">

	<el-row :gutter="20">
		<el-col :span="8">
			<el-card id="one" class="box-card">
			  <div slot="header" class="clearfix">
			    <span>个人信息</span>
			  </div>
			  <div id="two" style="min-width:410px;display: table-cell;vertical-align:middle;">
			  	<php>
					$userInfo = session('account')['userInfo'];
					$arr=M('user_info')->where(array('user_id'=>$userInfo['user_id']))->find(); 
					$arr['g_name']=M('group_basic')->where(array('id'=>$arr['group_id']))->getField('name');
					$arr['d_name']=M('department_basic')->where(array('id'=>$arr['department_id']))->getField('name');
					$arr['role_name']=M('rbac_role')->where(array('id'=>$arr['role_id']))->getField('name');
				</php>
			  	<img src="__ROOT__{$arr['head']}" class="image" width="100%" height="100%" style="width:200px;height:200px;border-radius:100%; vertical-align:middle;">
				
			  	<div id="th" style="float:right;width:200px;border-left:1px solid #e2e2e2;line-height:200%">
			  		&nbsp;&nbsp;&nbsp;<span>姓名：{$arr['realname']}</span><br>
			  		&nbsp;&nbsp;&nbsp;<span>I  D：{$arr['user_id']}</span><br>
			  		&nbsp;&nbsp;&nbsp;<span>职位类型：{$arr['role_name']}</span><br>
			  		&nbsp;&nbsp;&nbsp;<span>单位：{$arr['d_name']}-{$arr['g_name']}</span><br>
			  		&nbsp;&nbsp;&nbsp;<span>Q  Q：{$arr['qq']}</span><br>
			  		&nbsp;&nbsp;&nbsp;<span>电话：{$arr['phone']}</span><br>
			  		&nbsp;&nbsp;&nbsp;<span>地址：{$arr['address']|mb_substr=###,0,5}</span>
			  	</div>
			  </div>
			</el-card>
		</el-col>
		<el-col :span="16">
			<el-card class="box-card">
				<div slot="header" class="clearfix">
					系统公告
				</div>
				<div style="margin:-20px;">
					<el-table :data="dataList" v-loading="dataLoad"  border  
					stripe element-loading-text="{:L('DATA_LOGIN')}" @row-click="showContent" ref="select">
				      <el-table-column prop="type" label="公告类型"  align="center">
			               <template scope="scope">
			                  {{ getType(scope.row.type, 'NoticeType') }}
			               </template>
			          </el-table-column>
				      <el-table-column prop="title" label="公告标题" align="center"></el-table-column>
				      <!-- <el-table-column prop="start" label="开始日期" align="center"></el-table-column> -->
				    </el-table>
				    <el-col :span="24">
					     <div class="grid-content bg-purple-light pull-right" style="padding:2px;">
					       <!-- page -->
					       <include file="Common:_pagination" />
					       <!-- / page -->
					     </div>
				    </el-col>
				</div>
			</el-card>
		</el-col>
	</el-row>
<!-- 	<el-row>
	<el-col :span="24">
		<el-card class="box-card">
			<div slot="header" class="clearfix">
				<span>业绩走势 试用数据</span>
			</div>
			<div>
				<div id="echarts" style="height: 200px;">
					
				</div>
			</div>
		</el-card>
	</el-col>
</el-row> -->
<!-- 	<el-row>
	<el-col :span="24">
		<el-card class="box-card">
			<div class="clearfix" slot="header">
				<span>业绩报表(每日) 试用数据</span>
			</div>
			<div>
				<el-table :data="sysReport" border style="width: 100%">
			    <el-table-column prop="date"  label="日期" width="180"></el-table-column>
					<el-table-column prop="v"   label="总业绩"></el-table-column>
					<el-table-column prop="v"   label="成交客户数"></el-table-column>
					<el-table-column prop="xfc"   label="续费客户数（暂无）"></el-table-column>
					<el-table-column prop="xfy"   label="续费业绩（暂无）"></el-table-column>
			    </el-table>
			</div>
		</el-card>
	</el-col>
</el-row> -->

<!-- 	<el-row :gutter="20">
	<el-col :span="12">
		<el-card class="box-card">
			<div class="clearfix" slot="header">
				<span>量化报表(每日) 试用数据</span>
			</div>
			<div>
				<el-table border :data="data3" style="width:100%">
					<el-table-column prop="date" label="日期"></el-table-column>
					<el-table-column prop="phone_c"   label="电话跟踪"></el-table-column>
					<el-table-column prop="self_c"   label="锁定自跟"></el-table-column>
					<el-table-column prop="tj"   label="转入"></el-table-column>
					<el-table-column prop="xg"   label="转出"></el-table-column>
					<el-table-column prop="qq_c"   label="QQ跟踪"></el-table-column>
				</el-table>
			</div>
		</el-card>
	</el-col>
	<el-col :span="12">
		<el-card class="box-card">
			<div class="clearfix" slot="header">
				<span>客户统计(每日) 试用数据</span>
			</div>
			<div>
				<el-table border :data="data3" style="width:100%">
					<el-table-column prop="date" label="日期"></el-table-column>
					<el-table-column prop="all_num"   label="累计客户总数"></el-table-column>
					<el-table-column prop="create_c"   label="当日自锁数"></el-table-column>
					<el-table-column prop="today_v"   label="当日成交数"></el-table-column>
				</el-table> 
			</div>
		</el-card>
	</el-col> 
</el-row> -->
</div>
<div class="dialogWrapper" v-show="show" style="display: none">
  <!-- 显示系统公告内容 -->
  <include file="_showContent" />
  <!-- / 显示系统公告内容 -->
</div>
</div>
</block>
<block name="scripts">
<script src="__PUBLIC__/js/echarts.min.js"></script>
	<script>
	page.getEchartsOption = "{:U('IndexData/echarts')}";
	page.getSysReport = "{:U('IndexData/getSysReport')}";
	page.getData2 = "{:U('IndexData/getData2')}";
	page.getData3 = "{:U('IndexData/getData3')}";
	window.defaultOption.setVueHook('mounted', function(){
		
		var myChart = echarts.init(document.getElementById('echarts'));
		var option = {
	             title: {
			        text: '最近7天'
			    },
			    tooltip: {
			        trigger: 'axis',
			        axisPointer: { // 坐标轴指示器，坐标轴触发有效
			            type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
			        }
			    },
			    legend: {
			        data: ['自锁数'],
			        align: 'right',
			        right: 10
			    },
			    grid: {
			        left: '3%',
			        right: '4%',
			        bottom: '3%',
			        containLabel: true
			    },
			    xAxis: {
			        type: 'category',
			        data: ['2017-01-01', '2017-01-02', '2017-01-03', '2017-01-04', '2017-01-05']
			    },
			    yAxis: [{
			        type: 'value',
			        name: '数量',
			        axisLabel: {
			            formatter: '{value}'
			        }
			    }],
			    series: [{
			        name: '自锁数',
			        type: 'bar',
			        data: [20, 12, 31, 34, 31]
			    }, {
			        name: '成交数',
			        type: 'bar',
			        data: [10, 20, 5, 9, 3]
			    }]
	        }
		

		// console.log('mounted charts');
		
	        
        
        window.onresize = myChart.resize;


        /*var w=document.body.scrollWidth;
      	if(w<1400){
      		var two=document.getElementById('two');
      		var th=document.getElementById('th');
      		two.style.textAlign='center';
            th.style.lineHeight='150%';
            th.style.marginRight="30px";
            th.style.textAlign='left';
      	}*/
      	this.$http.get(page.getEchartsOption).then(function(response){
			option.xAxis.data = response.body.date;
			option.series = response.body.series;
			// console.log(response.body);
			myChart.setOption(option);
		}, function(response){
			this.$message.error("图表数据出错了");
		});

		this.$http.get(page.getSysReport).then(function(response){
			this.sysReport  = response.body;
		}, function(response){
			this.$message.error("业绩报表");
		});

		this.$http.get(page.getData2).then(function(response){
			this.data2  = response.body;
		}, function(response){
			this.$message.error("业绩报表");
		});

		this.$http.get(page.getData3).then(function(response){
			this.data3  = response.body;
		}, function(response){
			this.$message.error("业绩报表");
		});
		// setLocation()
		

		this.$http.get("{:U('setLocation')}").then(function(response){
			// this.data3  = response.body;
		});

	}).setDatas({
		NoticeType:{:json_encode($NoticeType)},
		contentDialog:false,
		noticeInfo:[],
		sysReport:[
				{
					date:'2016-12-01',
					zyj:'730',
					cjc:'0 / 0',
					xfc:'0.00 / 0.00',
					xfy:'1 / 0',
					sjc:'730.00 / 0.00',
					sjy:'0 / 0',
					
				},
				{
					date:'2016-12-02',
					zyj:'730',
					cjc:'0 / 0',
					xfc:'0.00 / 0.00',
					xfy:'1 / 0',
					sjc:'730.00 / 0.00',
					sjy:'0 / 0',
					
				}
				,
				{
					date:'2016-12-03',
					zyj:'730',
					cjc:'0 / 0',
					xfc:'0.00 / 0.00',
					xfy:'1 / 0',
					sjc:'730.00 / 0.00',
					sjy:'0 / 0',
					
				}
		],
		data3:[
				{
					date:'2016-01-01',
					sd:'1',
					gz:'2',
					tj:'0',
					xg:'4',
					xq:'1',
				},
				{
					date:'2016-01-02',
					sd:'1',
					gz:'2',
					tj:'0',
					xg:'4',
					xq:'1',
				},
				{
					date:'2016-01-03',
					sd:'1',
					gz:'2',
					tj:'0',
					xg:'4',
					xq:'1',
				},
				{
					date:'2016-01-04',
					sd:'1',
					gz:'2',
					tj:'0',
					xg:'4',
					xq:'1',
				}
		]
	}).setMethod('getType', function(type, field){
       return this[field][type];
    }).setMethod('showContent',function(row,event,column){
       this.contentDialog = true;
       this.noticeInfo = row;
    });
	</script>

</block>
